<!DOCTYPE html>
<html>
<!--
	作者：github.com/WangEn
	时间：2018-02-02
	描述：添加文章类别
-->
<head>
  <meta charset="UTF-8">
  <title>编辑图集-WeAdmin Frame型后台管理系统-WeAdmin 1.0</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="/resource/backend/css/font.css">
  <link rel="stylesheet" href="/resource/backend/css/weadmin.css">
  <link rel="stylesheet" href="/resource/backend/css/Jsequencing.css">
  <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
  <!--[if lt IE 9]>
  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->
  <style>
    .layui-form-selected dl {
      z-index: 1000;
    }
  </style>
  <script src="/resource/backend/js/jquery.min.js" charset="utf-8"></script>
  <script src="/resource/backend/js/Jsequencing.js" charset="utf-8"></script>
</head>

<body>
<div class="weadmin-body">
  <form class="layui-form">

    <div class="layui-form-item">
      <label class="layui-form-label">
        <i style="color:red;margin: 0 4px;">*</i>
        所属栏目
      </label>
      <div class="layui-input-block">
        <select name="channel_id" lay-verify="required|number" lay-filter="cat_id">
          <option value="" data-level="0">-请选择栏目-</option>
          ${range $key, $item := .channelModelTree}$
          <option value="${$item.Id}$" data-level="${$item.Level}$" ${if $item.Selected}$selected${end}$>
            ${$item.Name}$
          </option>
          ${end}$
        </select>
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label"><i style="color:red;margin: 0 4px;">*</i>图集标题</label>
      <div class="layui-input-block">
        <input type="text" id="title" name="title" lay-verify="required" autocomplete="off" class="layui-input"
               value="${ .imagesInfo.Title }$"
        >
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">
        <i style="color:red;margin: 0 4px;">*</i>
        图片
      </label>
      <div class="layui-input-block">
        <div class="">
          <button type="button" class="layui-btn layui-btn-primary layui-border-green" id="upload_img">
            多图上传
          </button>
          <a onclick="delimg()" class="layui-btn layui-btn-primary layui-border-red" id="delimg"
             style="margin-left: 15px;">批量删除</a>
        </div>
        <blockquote class="layui-elem-quote" style="margin:10px 0 -10px;">第一张图作为主图展示，可拖动图片排序；
        </blockquote>
        <div class="cl imglist" id="img_ul"></div>
        <input id="images" class="layui-input" type="hidden" name="images" value="">
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">图集描述</label>
      <div class="layui-input-block">
        <div id="editor—wrapper">
          <div id="toolbar-container"><!-- 工具栏 --></div>
          <div id="editor-container"><!-- 编辑器 --></div>
        </div>
        <textarea name="description" id="description" cols="30" rows="10"
                  style="display: none"></textarea>
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">
        图集属性
      </label>
      <div class="layui-input-block">
        <input type="checkbox" name="flag_r" value="1" title="推荐" ${ if eq 1 .imagesInfo.FlagR }$ checked ${
               end }$>
        <input type="checkbox" name="flag_t" value="1" title="置顶" ${ if eq 1 .imagesInfo.FlagT }$ checked ${
               end }$>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">
        状态
      </label>
      <div class="layui-input-block">
        <input type="checkbox" checked="" name="status" lay-skin="switch" lay-filter="switchTest"
               lay-text="启用|停用" value="1" ${ if eq 1 .imagesInfo.Status }$ checked ${ end }$>
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">发布时间</label>
      <div class="layui-input-block">
        <input type="text" value="${ .imagesInfo.CreatedAt }$" name="created_at" id="editdate"
               lay-verify="datetime"
               placeholder="yyyy-MM-dd H:i:s" autocomplete="off" class="layui-input">
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">点击数</label>
      <div class="layui-input-inline">
        <input type="text" id="click" name="click_num" lay-verify="number" value="${ .imagesInfo.ClickNum }$"
               class="layui-input">
      </div>
    </div>

    <div class="layui-form-item">
      <div class="layui-input-block">
        <input name="id" type="hidden" value="${ .imagesInfo.Id }$">
        <button class="layui-btn" lay-submit lay-filter="add">提交</button>
        <button class="layui-btn layui-btn-primary" type="reset" onclick="window.location.reload()">重置</button>
      </div>
    </div>
  </form>
</div>
<script src="/resource/backend/lib/layui/layui.js" charset="utf-8"></script>
<script>
  layui.use(['form', 'layer', 'laydate', 'jquery', 'upload'], function () {
    var form = layui.form,
      layer = layui.layer,
      laydate = layui.laydate,
      upload = layui.upload,
      $ = layui.jquery;
    laydate.render({
      elem: '#editdate'
      , type: 'datetime'
    });
    //上传文章缩略图
    layui.use(['upload', 'jquery'], function () {
      var upload = layui.upload;
      var $ = layui.$;
      //执行实例
      var uploadInst = upload.render({
        elem: '#topicImg' //绑定元素
        , url: '${ backend_api_url `/upload/single_image` }$' //上传接口
        , done: function (res) {
          //上传完毕回调
          if (res.code === 0) {
            $('#litpic').attr('src', res.data['url']);
            $('#litpic_text').val(res.data['url']);
          } else {
            layer.msg(res.message, {
              time: 3000,
              icon: 5
            });
          }
        }
        , error: function (res) {
          //请求异常回调
          layer.msg(res.message, {
            time: 3000,
            icon: 5
          })
        }
      });
    });

    //监听提交
    form.on('submit(add)', function (data) {
      //console.table(data.field);
      //发异步，把数据提交给php
      $.post('${ backend_api_url `/image/edit` }$', data.field, function (res) {
        //console.table(res);
        if (res.code === 0) {
          layer.msg(res.message, {icon: 6, time: 1000}, function () {
            // 获得frame索引
            var index = parent.layer.getFrameIndex(window.name);
            //关闭当前frame
            parent.layer.close(index);
            //parent.location.reload();
            //模拟点击父级页面的搜索按钮，以达到动态加载效果，并保留所选的栏目select不变
            $('#reload', parent.document).trigger('click');
          });
        } else {
          layer.msg(res.message, {icon: 5});
        }

      }, 'json');

      return false;
    });

    //多图片上传
    upload.render({
      elem: '#upload_img'
      , url: '${backend_api_url `/upload/single_image`}$' //此处配置你自己的上传接口即可
      , multiple: true
      , before: function (obj) {
      }
      , done: function (res) {
        //上传完毕
        if (res.code === 0) {
          // 填充新图
          imgulp.addimg(res.data['url'], res.data['name'])
          form.render()
        } else {
          layer.msg(res.message, {icon: 5});
        }
      }
    });

  });

</script>
<script>
  var imgulp = new Jsequencing({
    listid: "img_ul",//页面图片列表ID
    thumbherf: "",//列表图片前缀
    bigherf: "",//原图前缀[同列表图相同时，省略]
    jsondata: true,
    imgsrcarr: ${ .imagesInfo.ImagesSrcJson }$,
  });

  function getImagesArr() {
    setTimeout(function () {
      let arr = imgulp.getnewarr();
      // console.log('arr', arr)
      let imgStr = ''
      $.each(arr, function (index, item) {
        imgStr += item.src + ','
      });
      imgStr = imgStr.substring(0, imgStr.length - 1)
      console.log('imgStr', imgStr)
      $('#images').val(imgStr)
      if (imgStr.length > 0) {
        $('#delimg').show()
      } else {
        $('#delimg').hide()
      }
    }, 100)
  }

  function delimg() {
    imgulp.datadel();
    getImagesArr()
  }
</script>
<!--wangEditor-->
<link rel="stylesheet" href="/resource/backend/lib/wangEditor/wangEditor.css">
<style>
  #editor—wrapper {
    border: 1px solid #ccc;
    z-index: 100; /* 按需定义 */
  }

  #toolbar-container {
    border-bottom: 1px solid #ccc;
  }

  #editor-container {
    height: 500px;
  }
</style>
<script src="/resource/backend/lib/wangEditor/wangEditor.js"></script>
<script>
  const {createEditor, createToolbar} = window.wangEditor

  const editorConfig = {
    placeholder: '',
    onChange(editor) {
      const html = editor.getHtml()
      console.log('editor content', html)
      // 也可以同步到 <textarea>
      document.getElementById('description').value = html
    },
    MENU_CONF: {}
  }
  editorConfig.MENU_CONF['uploadImage'] = {
    server: '${backend_api_url `/upload/single_image`}$',
    fieldName: 'file',
    allowedFileTypes: ['image/*'],
    maxFileSize: '${system_config `server.clientMaxBodySize`}$',
    // 自定义插入图片
    customInsert(res, insertFn) {                  // JS 语法
      // 从 res 中找到 url alt href ，然后插入图片
      console.log("upload-image-res", res)
      if (res.code !== 0) throw new Error(res.message)
      let imageInfo = res.data;
      insertFn(imageInfo.url, "", "")
    },
  }
  editorConfig.MENU_CONF['uploadVideo'] = {
    server: '${backend_api_url `/upload/single_video`}$',
    fieldName: 'file',
    allowedFileTypes: ['video/*'],
    maxFileSize: '${system_config `server.clientMaxBodySize`}$',
    // 自定义插入视频
    customInsert(res, insertFn) {                  // JS 语法
      // 从 res 中找到 url alt href ，然后插入视频
      console.log("upload-video-res", res)
      if (res.code !== 0) throw new Error(res.message)
      let videoInfo = res.data;
      insertFn(videoInfo.url, "", "")
    },
  }

  const editor = createEditor({
    selector: '#editor-container',
    html: '${ .imagesInfo.Description }$',
    config: editorConfig,
    mode: 'default', // or 'simple'
  })

  const toolbarConfig = {}

  const toolbar = createToolbar({
    editor,
    selector: '#toolbar-container',
    config: toolbarConfig,
    mode: 'default', // or 'simple'
  })
</script>
<!--wangEditor-->
</body>

</html>
